var VM = new Vue({
    el: '#app',
    data: {
        defaultTypes: [//所有类型的默认数据
            {
                id: 0,
                type: 'banner',
                imgUrl: [
                    {
                        img: 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Lb.jpg',
                        url: ''
                    }
                ],
                focus: true,
                focusColor: '#000000',
                swiperHeight: 150
            },
            {
                id: 0,
                type: 'navigation',
                column: 4,
                fontColor: "#333333",
                fontSize: 14,
                radius: 50,
                list: [{
                    title: '名称',
                    url: 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Lb2.png',
                    direction: ''
                }
                ]
            },
            {
                id: 0,
                type: 'blank',
                bgColor: '#eeeeee',
                height: 30
            },
            {
                id: 0,
                type: 'headline',
                text: '这是标题',
                style: 1,
                fontColor: '#333333',
                fontSize: 14,
                bgColor: '#ffffff'
            },
            {
                id: 0,
                type: 'search',
                searchColor: '#ffffff',
                bgColor: '#ffffff',
                fontColor: '#333333',
                hotSearch: '关键词1,关键词2,关键词3'
            },
            {
                id: 0,
                type: 'line',
                styles: 'solid',
                lineColor: '#00000',
                bgColor: '#ffffff',
                lineHeight: 1,
                height: 20
            },
            {
                id: 0,
                type: 'glossary',
                styles: 1,
                titleSize: 18,
                titleColor: '#000000',
                bgColor: '#ffffff',
                lists: [{
                    img: 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Tpj_3.png',
                    title: '我是标题',
                    innerText: '我是图文内容',
                    direction: ''
                }
                ]
            },
            {
                id: 0,
                type: 'button',
                parma: {
                    text: '按钮',
                    radius: 10,
                    border: false,
                    icon: true,
                    url: 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/kefu.png',
                    link: '',
                    fontColor: '#ffffff',
                    bgColor: '#0da3f9',
                    borderColor: '#ffffff'
                }
            },
            {
                id: 0,
                type: 'pictureList',
                styles: 1,
                column: 2,
                radius: 20,
                lists: [{
                    img: 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Tplb_3.png',
                    title: '这是标题',
                    direction: ''
                }
                ]
            },
            {
                id: 0,
                type: 'fixed',
                bottom: 1,
                left: 80,
                opacity: 1,
                bgColor: '#ffffff',
                img: 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/kefu.png',
                direction: ''
            },
            {
                id: 0,
                type: 'video',
                src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
                poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
                autoPlay: false
            },
            {
                id: 0,
                type: 'audio',
                poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
                src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
                name: '此时此刻',
                author: '许巍',
            },
            {
                id: 0,
                type: 'advert',
                height: 150,
                adLists: [{
                    img: 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Lb2.png',
                    width: 50,
                    direction: ''
                }
                ]
            }
        ],
        allLists: [],//所有数据
        currentType: '',//当前的类型
        currentId:0, //当前类型id
        MaxId:0,//用来设置新增类型的id
    },
    mounted: function() {
        this.$dragging.$on('dragged', function(data) {
            console.log('dragged', data)
        })
    },
    computed: {
        bannerHeight: {//设置banner的高度
            get() {
                let height
                this.allLists.map(item => {
                    if (item.type === 'banner' && item.id === this.currentId) {
                        height = item.swiperHeight
                    }
                })
                return height
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'banner'  && item.id === this.currentId) {
                        item.swiperHeight = newValue
                    }
                })
            }
        },
        setBannerFocusColor: {//设置轮播焦点的颜色
            get() {
                let focusColor
                this.allLists.map(item => {
                    if (item.type === 'banner'  && item.id === this.currentId) {
                        focusColor =  item.focusColor
                    }
                    return focusColor
                })
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'banner'  && item.id === this.currentId) {
                        item.focusColor = newValue
                    }
                })
            }
        },
        blank_bgColor: {//设置空白的背景颜色
            get() {
                this.allLists.map(item => {
                    if (item.type === 'blank'  && item.id === this.currentId) {
                        return item.bgColor
                    }
                })
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'blank'  && item.id === this.currentId) {
                        item.bgColor = newValue
                    }
                })
            }
        },
        setBlankHeight: {//设置辅助空白的高度
            get() {
                let height
                this.allLists.map(item => {
                    if (item.type === 'blank'  && item.id === this.currentId) {
                        height = item.height
                    }
                })
                return height
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'blank'  && item.id === this.currentId) {
                        item.height = newValue
                    }
                })
            }
        },
        setNavRdadius: {//设置导航图标的radius
            get() {
                let radius
                this.allLists.map(item => {
                    if (item.type === 'navigation'  && item.id === this.currentId) {
                        radius = item.radius
                    }
                })
                return radius
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'navigation'  && item.id === this.currentId) {
                        item.radius = newValue
                    }
                })
            }
        },
        setNavFontColor: {//设置导航文字的颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'navigation'  && item.id === this.currentId) {
                        color = item.fontColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'navigation'  && item.id === this.currentId) {
                        item.fontColor = newValue
                    }
                })
            }
        },
        setHeadLineText: {//设置标题的文字
            get() {
                let text
                this.allLists.map(item => {
                    if (item.type === 'headline'  && item.id === this.currentId) {
                        text = item.text
                    }
                })
                return text
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'headline'  && item.id === this.currentId) {
                        item.text = newValue
                    }
                })
            }
        },
        setHeadLineColor: {//设置标题文字的颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'headline'  && item.id === this.currentId) {
                        color = item.fontColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'headline'  && item.id === this.currentId) {
                        item.fontColor = newValue
                    }
                })
            }
        },
        setSearchColor: {//设置搜索框的颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'search'  && item.id === this.currentId) {
                        color = item.searchColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'search'  && item.id === this.currentId) {
                        item.searchColor = newValue
                    }
                })
            }
        },
        setSearchBgColor: {//设置搜索框的背景颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'search'  && item.id === this.currentId) {
                        color = item.bgColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'search'  && item.id === this.currentId) {
                        item.bgColor = newValue
                    }
                })
            }
        },
        setSearchFontColor: {//设置搜索文字的颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'search'  && item.id === this.currentId) {
                        color = item.fontColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'search'  && item.id === this.currentId) {
                        item.fontColor = newValue
                    }
                })
            }
        },
        hotSearch: {//热搜词的双向绑定
            get() {
                let words
                this.allLists.map(item => {
                    if (item.type === 'search'  && item.id === this.currentId) {
                        words = item.hotSearch
                    }
                })
                return words
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'search'  && item.id === this.currentId) {
                        item.hotSearch = newValue
                    }
                })
            }
        },
        setLineColor: {//设置分割线颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'line'  && item.id === this.currentId) {
                        color = item.lineColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'line'  && item.id === this.currentId) {
                        item.lineColor = newValue
                    }
                })
            }
        },
        setLineBgColor: {//设置分割线的背景颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'line'  && item.id === this.currentId) {
                        color = item.bgColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'line'  && item.id === this.currentId) {
                        item.bgColor = newValue
                    }
                })
            }
        },
        setLineHeight: {//设置分割线的高度
            get() {
                let height
                this.allLists.map(item => {
                    if (item.type === 'line'  && item.id === this.currentId) {
                        height = item.lineHeight
                    }
                })
                return height
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'line'  && item.id === this.currentId) {
                        item.lineHeight = newValue
                    }
                })
            }
        },
        setLinpadding: {//设置分割线的上下边距
            get() {
                let height
                this.allLists.map(item => {
                    if (item.type === 'line'  && item.id === this.currentId) {
                        height = item.height
                    }
                })
                return height
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'line'  && item.id === this.currentId) {
                        item.height = newValue
                    }
                })
            }
        },
        getListTitleColor: {//设置图文集标题的颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'glossary'  && item.id === this.currentId) {
                        color = item.titleColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'glossary'  && item.id === this.currentId) {
                        item.titleColor = newValue
                    }
                })
            }
        },
        getListBgColor: {//设置图文集的背景颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'glossary'  && item.id === this.currentId) {
                        color = item.bgColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'glossary'  && item.id === this.currentId) {
                        item.bgColor = newValue
                    }
                })
            }
        },
        setBtnTitle: {//按钮的文字双向绑定
            get() {
                let words
                this.allLists.map(item => {
                    if (item.type === 'button'  && item.id === this.currentId) {
                        words = item.parma.text
                    }
                })
                return words
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'button'  && item.id === this.currentId) {
                        item.parma.text = newValue
                    }
                })
            }
        },
        setBtnRadius: {
            get() {
                let radius
                this.allLists.map(item => {
                    if (item.type === 'button'  && item.id === this.currentId) {
                        radius = item.parma.radius
                    }
                })
                return radius
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'button'  && item.id === this.currentId) {
                        item.parma.radius = newValue
                    }
                })
            }
        },
        setBtnTitleColor: {//设置按钮标题的颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'button'  && item.id === this.currentId) {
                        color = item.parma.fontColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'button'  && item.id === this.currentId) {
                        item.parma.fontColor = newValue
                    }
                })
            }
        },
        setBtnBgolor: {//设置按钮背景的颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'button'  && item.id === this.currentId) {
                        color = item.parma.bgColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'button'  && item.id === this.currentId) {
                        item.parma.bgColor = newValue
                    }
                })
            }
        },
        setBtnBorderolor: {//设置边框的颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'button'  && item.id === this.currentId) {
                        color = item.parma.borderColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'button'  && item.id === this.currentId) {
                        item.parma.borderColor = newValue
                    }
                })
            }
        },
        CurrentBtnIcon() {//获取当前按钮的icon
            let img
            this.allLists.map(item => {
                if (item.type === 'button'  && item.id === this.currentId) {
                    img = item.parma.url
                }
            })
            return img
        },
        setPicRadius: {//设置图文的圆角比例
            get() {
                let radius
                this.allLists.map(item => {
                    if (item.type === 'pictureList'  && item.id === this.currentId) {
                        radius = item.radius
                    }
                })
                return radius
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'pictureList'  && item.id === this.currentId) {
                        item.radius = newValue
                    }
                })
            }
        },
        setFixBottom: {//设置悬浮图标距离底部的位置
            get() {
                let bottom
                this.allLists.map(item => {
                    if (item.type === 'fixed'  && item.id === this.currentId) {
                        bottom = item.bottom
                    }
                })
                return bottom
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'fixed'  && item.id === this.currentId) {
                        item.bottom = newValue
                    }
                })
            }
        },
        setFixLeft: {//设置悬浮图标距离左边的位置
            get() {
                let left
                this.allLists.map(item => {
                    if (item.type === 'fixed'  && item.id === this.currentId) {
                        left = item.left
                    }
                })
                return left
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'fixed'  && item.id === this.currentId) {
                        item.left = newValue
                    }
                })
            }
        },
        setFixOpacity: {//设置悬浮图标的透明度
            get() {
                let opacity
                this.allLists.map(item => {
                    if (item.type === 'fixed'  && item.id === this.currentId) {
                        opacity = item.opacity
                    }
                })
                return opacity
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'fixed'  && item.id === this.currentId) {
                        item.opacity = newValue
                    }
                })
            }
        },
        setFixBgColor: {//设置悬浮图标的背景颜色
            get() {
                let color
                this.allLists.map(item => {
                    if (item.type === 'fixed'  && item.id === this.currentId) {
                        color = item.bgColor
                    }
                })
                return color
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'fixed'  && item.id === this.currentId) {
                        item.bgColor = newValue
                    }
                })
            }
        },
        getFixBgImg() {//获取悬浮图标的背景图片
            let img
            this.allLists.map(item => {
                if (item.type === 'fixed'  && item.id === this.currentId) {
                    img = item.img
                }
            })
            return img
        },
        setVideoLink: {//设置视频的播放链接
            get() {
                let link
                this.allLists.map(item => {
                    if (item.type === 'video'  && item.id === this.currentId) {
                        link = item.src
                    }
                })
                return link
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'video'  && item.id === this.currentId) {
                        item.src = newValue
                    }
                })
            }
        },
        getVideoPoster() {//获取视频的封面
            let poster
            this.allLists.map(item => {
                if (item.type === 'video'  && item.id === this.currentId) {
                    poster = item.poster
                }
            })
            return poster
        },
        setAudioLink: {//设置视频的播放链接
            get() {
                let link
                this.allLists.map(item => {
                    if (item.type === 'audio'  && item.id === this.currentId) {
                        link = item.src
                    }
                })
                return link
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'audio'  && item.id === this.currentId) {
                        item.src = newValue
                    }
                })
            }
        },
        getAudioPoster() {//获取音频封面
            let poster
            this.allLists.map(item => {
                if (item.type === 'audio'  && item.id === this.currentId) {
                    poster = item.poster
                }
            })
            return poster
        },
        setAudioName: {//设置音频名称
            get() {
                let name
                this.allLists.map(item => {
                    if (item.type === 'audio'  && item.id === this.currentId) {
                        name = item.name
                    }
                })
                return name
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'audio'  && item.id === this.currentId) {
                        item.name = newValue
                    }
                })
            }
        },
        setAudioAuthor: {//设置音频作者
            get() {
                let author
                this.allLists.map(item => {
                    if (item.type === 'audio'  && item.id === this.currentId) {
                        author = item.author
                    }
                })
                return author
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'audio'  && item.id === this.currentId) {
                        item.author = newValue
                    }
                })
            }
        },
        setAdvertHeight: {//设置广告位的高度
            get() {
                let height
                this.allLists.map(item => {
                    if (item.type === 'advert'  && item.id === this.currentId) {
                        height = item.height
                    }
                })
                return height
            },
            set(newValue) {
                this.allLists.map(item => {
                    if (item.type === 'advert'  && item.id === this.currentId) {
                        item.height = newValue
                    }
                })
            }
        }
    },
    methods: {
        focus(boolean) {//是否显示banner的焦点
            this.allLists.map((item, index) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.focus = boolean
                }
            })
        },
        setIsFocus(boolean) {//渲染是否显示焦点选中的样式
            let booleans
            this.allLists.map((item) => {
                if (item.type == this.currentType  && item.id === this.currentId) {
                    if(item.focus === boolean){
                        booleans = true
                    }else{
                        booleans = false
                    }
                }
            })
            return booleans
        },
        addBanner() {//新增一个banner图
            this.allLists.map((item, index) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    let img = {
                        "img": "http://vip.ly100.wang//public/upload/6/goods/be5c9f32cb3ffac15d3f8301736b5f2d.jpg",
                        url: '123'
                    }
                    item.imgUrl.push(img)
                }
            })
        },
        deleteBanner(index) {//删除某张banner图
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.imgUrl.map((list, indexs) => {
                        if (indexs === index) {
                            item.imgUrl.splice(indexs, 1)
                        }
                    })
                }
            })
        },
        selectBannerImg(index) {//选择banner图片
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.imgUrl.map((list, indexs) => {
                        if (indexs === index) {
                            list.img = 'http://vip.ly100.wang//public/upload/6/goods/8536b907e0a590090a893ff56821096b.jpg'
                        }
                    })
                }
            })
        },
        addLink(index) {//给banner添加链接
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.imgUrl.map((list, indexs) => {
                        if (indexs === index) {
                            list.url = '12312312'
                        }
                    })
                    console.log(item.imgUrl)
                }
            })
        },
        setNavColumnStyle(num) {//渲染导航选中的样式
            let style
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    if (item.column === num) style = 'isColumn'
                    else style = 'noColumn'
                }
            })
            return style
        },
        setNavColumn(columns) {//设置导航几列
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.column = columns
                }
            })
        },
        setNavFontStyle(num) {//渲染导航字体选中的样式
            let boolean
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    if (item.fontSize === num) boolean = true
                    else boolean = false
                }
            })
            return boolean
        },
        setNavFont(num) {//设置导航字体大小
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.fontSize = num
                }
            })
        },
        deleteNav(index) {//删除选中的导航
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.list.map((list, indexs) => {
                        if (indexs === index) {
                            item.list.splice(indexs, 1)
                        }
                    })
                }
            })
        },
        selectNavImg(index) {//更改导航的图标
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.list.map((ops, indexs) => {
                        if (indexs === index) {
                            ops.url = 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Lb2.png'
                        }
                    })
                }
            })
        },
        addNav() {//新增一个导航
            this.allLists.map((item, index) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    let nav = {
                        'title': '烧菜',
                        "url": "https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Lb2.png",
                        'direction': '123'
                    }
                    item.list.push(nav)
                }
            })
        },
        getHeadLineStyle(num) {//渲染标题样式选中的样式
            let boolean
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    if (item.style === num) boolean = true
                    else boolean = false
                }
            })
            return boolean
        },
        setHeadLine(num) {//设置标题样式
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.style = num
                }
            })
        },
        getHeadLineFontSize(num) {//渲染标题字体选中的样式
            let style
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    if (item.fontSize === num) style = true
                    else style = false
                }
            })
            return style
        },
        setHeadLineFontSize(num) {//设置标题字体大小
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.fontSize = num
                }
            })
        },
        getLineStyle(num) {//渲染分割线实虚线选中的样式
            let style
            let line = num === 1 ? 'solid' : 'dashed';
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    if (item.styles === line) style = true
                    else style = false
                }
            })
            return style
        },
        setLineStyle(num) {//设置分割线的样式
            let line = num === 1 ? 'solid' : 'dashed';
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.styles = line
                }
            })
        },
        getListcurrentStyle(num) {//渲染图文集样式选中
            let style
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    if (item.styles === num) style = true
                    else style = false
                }
            })
            return style
        },
        setListcurrentStyle(num) {//选择图文集的样式
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.styles = num
                }
            })
        },
        getListFontStyle(num) {//渲染图文集中文字大小
            let size
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    if (item.titleSize === num) size = true
                    else size = false
                }
            })
            return size
        },
        setListFontStyle(num) {//设置图文集标题文字的大小
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.titleSize = num
                }
            })
        },
        deleteList(index) {//删除图文集的某一项 
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.lists.map((list, indexs) => {
                        if (indexs === index) {
                            item.lists.splice(indexs, 1)
                        }
                    })
                }
            })
        },
        addList() {//图文集新增一项
            this.allLists.map((item, index) => {
                if (item.type == this.currentType  && item.id === this.currentId) {
                    let list = {
                        "img": "https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Tpj_3.png",
                        'title': '我是标题1',
                        'innerText': '我是内容1',
                        'direction': ''
                    }
                    item.lists.push(list)
                }
            })
        },
        selectListImg(index) {//更改选中图文集的图片
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.lists.map((ops, indexs) => {
                        if (indexs === index) {
                            ops.img = 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Lb2.png'
                        }
                    })
                }
            })
        },
        getBtnborderShow(boolean) {//显示是否隐藏按钮的边框
            let style
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    if (item.parma.border === boolean) style = true
                    else style = false
                }
            })
            return style
        },
        setBtnborderShow(boolean) {//设置是否显示边框
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.parma.border = boolean
                }
            })
        },
        getBtnIconShow(boolean) {//显示是否隐藏按钮的图标
            let style
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    if (item.parma.icon === boolean) style = true
                    else style = false
                }
            })
            return style
        },
        setBtnIconShow(boolean) {//设置是否显示图标
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.parma.icon = boolean
                }
            })
        },
        setCurrentBtnImg() {//设置按钮的图标
            this.allLists.map(item => {
                if (item.type === 'button'  && item.id === this.currentId) {
                    item.parma.url = 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Tpj_3.png'
                }
            })
        },
        getPicStyle(num) {//显示图文列表的选中样式
            let style
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    if (item.styles === num) style = true
                    else style = false
                }
            })
            return style
        },
        setPicStyle(num) {//设置图文的样式
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.styles = num
                }
            })
        },
        getPicColumn(num) {//显示图文列表排版的选中样式
            let style
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    if (item.column === num) style = 'isColumn'
                    else style = 'noColumn'
                }
            })
            return style
        },
        setPicColumn(num) {//设置图文的排版
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.column = num
                }
            })
        },
        deletePic(index) {//删除某一项图文
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.lists.map((list, indexs) => {
                        if (indexs === index) {
                            item.lists.splice(indexs, 1)
                        }
                    })
                }
            })
        },
        addPic() {//新增一项图文
            this.allLists.map((item, index) => {
                if (item.type == this.currentType  && item.id === this.currentId) {
                    let pic = {
                        'img': 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Tplb_3.png',
                        'title': '我是标题',
                        'direction': ''
                    }
                    item.lists.push(pic)
                }
            })
        },
        setFixBgImg() {//设置悬浮图标的icon
            this.allLists.map(item => {
                if (item.type === 'fixed'  && item.id === this.currentId) {
                    item.img = 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Tpj_3.png'
                }
            })
        },
        setVideoPoster() {//设置视频封面
            this.allLists.map(item => {
                if (item.type === 'video'  && item.id === this.currentId) {
                    item.poster = 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Tpj_3.png'
                }
            })
        },
        setAudioPoster() {//设置音频封面
            this.allLists.map(item => {
                if (item.type === 'audio'  && item.id === this.currentId) {
                    item.poster = 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Tpj_3.png'
                }
            })
        },
        addAdvert() {//新增一个广告
            this.allLists.map((item, index) => {
                if (item.type == this.currentType  && item.id === this.currentId) {
                    let list = {
                        img: 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Lb2.png',
                        width: 100,
                        direction: ''
                    }
                    item.adLists.push(list)
                }
            })
        },
        deleteAdvert(index) {//删除一个广告位
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.adLists.map((list, indexs) => {
                        if (indexs === index) {
                            item.adLists.splice(indexs, 1)
                        }
                    })
                }
            })
        },
        selectAdvImg(index) {//设置广告位的图片
            this.allLists.map((item) => {
                if (item.type === this.currentType  && item.id === this.currentId) {
                    item.adLists.map((list, indexs) => {
                        if (indexs === index) {
                            list.img = 'https://wx.cqkundian.com/addons/ybgw_001/core/public/menu/images/Tplb_3.png'
                        }
                    })
                }
            })
        },
        AddDom(parma) {//新增一个节点
            let index = parma
            let MaxId = this.MaxId
            let types = JSON.parse(JSON.stringify(this.defaultTypes));
            types.map((item) => {
                if(item.type === index) {
                    MaxId+=1
                    item.id = MaxId
                    this.MaxId = MaxId
                    this.allLists.push(item)
                    this.currentType = item.type
                    this.currentId = MaxId;
                }
            })
        },
        deleteDom(id) {//删除节点
            console.log("delete");
            this.allLists.map((item, index) => {
                if(item.id === id) this.allLists.splice(index,1)
            })
            this.currentType = ''
            this.currentId = 0
        },
        save() {//保存
            let data  = JSON.stringify(this.allLists)
            localStorage.setItem('list',data)
        },
        saveToMyTemplate() {//保存到我的模板

        }
    },
    watch:　{
        currentId(newValue, oldValue) {
            console.log(newValue)
        },
        currentType(newValue) {
            console.log(newValue)
        }
    }
})

// 轮播
Vue.component('banner', {
    props: ['id','focus', 'focusColor', 'imgUrl', 'swiperHeight'],
    template: '<div @click="select" class="swiper" :style="height"><img :src="imgUrl[currentIndex].img"/><div v-if="focus" class="dots"><span  class="dot" :style="dotColor(index)" v-for="(item, index) in imgUrl" :key="index" @click="select_dot(index)"></span></div></div>',
    data() {
        return {
            currentIndex: 0,
        }
    },
    computed: {
        height() {
            return `height: ${this.swiperHeight}px`
        }
    },
    methods: {
        select() {
            VM.currentType = 'banner',
            VM.currentId = this.id
        },
        select_dot(index) {
            this.currentIndex = index
        },
        dotColor(index) {
            if (index === this.currentIndex) {
                return `background: ${this.focusColor}`
            }
        }
    }
})
// 辅助空白
Vue.component('blank', {
    props: ['id','bgColor', 'height'],
    template: '<div @click="select" class="blank" :style="style"></div>',
    computed: {
        style() {
            return `background: ${this.bgColor}; height:${this.height}px`
        }
    },
    methods: {
        select() {
            VM.currentType = 'blank',
            VM.currentId = this.id
        },
    }
})
// 广告位
Vue.component('advert', {
    props: ['id','height', 'adLists'],
    template: '<div @click="select" class="advert clear" ref="advert" :style="heights"><div v-for="(item,index) in adLists" :key="index" class="advert_img_wrapper" :style="' + "'width:'" + '+item.width+' + "'%;'" + "" + '"><img width="100%" height="100%" :src="item.img"/></div></div>',
    computed: {
        heights() {
            return `height: ${320 * this.height / 100}px`
        }
    },
    methods: {
        select() {
            VM.currentType = 'advert',
            VM.currentId = this.id
        },
    }
})
// 宮格导航
Vue.component('navigation', {
    props: ['id','column', 'fontColor', 'fontSize', 'radius', 'list'],
    template: '<div @click="select" class="navigation clear"><div v-for="(item, index) in list" :key="index" class="navigation_item center" :style="width"><img :style="imgRadius" :src="item.url"/><div class="padtop5" :style="fontStyle" v-text="item.title"></div></div></div>',
    computed: {
        width() {
            const column = this.column
            let width = 0
            if (column === 2) width = 50
            else if (column === 3) width = 33.3
            else if (column === 4) width = 25
            else width = 20
            return `width:${width}%;`
        },
        imgRadius() {
            return `border-radius: ${this.radius}%`
        },
        fontStyle() {
            return `font-size:${this.fontSize}px; color:${this.fontColor}`
        }
    },
    methods: {
        select() {
            VM.currentType = 'navigation',
            VM.currentId = this.id
        },
    }
})
// 标题
Vue.component('headline', {
    props: ['id','text', 'styles', 'fontColor', 'fontSize', 'bgColor'],
    template: '<div @click="select"><div v-if="styles === 1" class="headline" :style="currentStyle" v-text="text"></div><div v-if="styles === 2" class="headline" :style="currentStyle"><span class="headline_style2"></span><span v-text="text"></span></div><div v-if="styles === 3" class="headline justCenter" :style="currentStyle" v-text="text"></div><div v-if="styles === 4" class="headline" :style="currentStyle"><span class="headline_style4"></span><span v-text="text"></span></div><div v-if="styles === 5" class="headline" :style="currentStyle"><div class="headline_bg_style5"></div><span v-text="text" class=" headline_style5" :style="currentStyle"></span></div></div>',
    computed: {
        currentStyle() {
            return `font-size:${this.fontSize}px;color:${this.fontColor};background:${this.bgColor}`
        }
    },
    methods: {
        select() {
            VM.currentType = 'headline',
            VM.currentId = this.id
        },
    }
})
// 搜索框
Vue.component('search', {
    props: ['id','styles', 'searchColor', 'bgColor', 'fontColor', 'hotSearch'],
    template: '<div @click="select" class="search" :style="wrapperBg"><div :style="input" class="search_input"><span class="iconfont">&#xe7d4;</span>{{hotSearch}}</div></div>',
    computed: {
        wrapperBg() {
            return `background:${this.bgColor}`
        },
        input() {
            return `background:${this.searchColor}; color:${this.fontColor}`
        }
    },
    methods: {
        select() {
            VM.currentType = 'search',
            VM.currentId = this.id
        },
    }
})
//分割线
Vue.component('lines', {
    props: ['id','styles', 'lineColor', 'bgColor', 'lineHeight', 'height'],
    template: '<div @click="select" class="line" :style="lineStyle"><div :style="hrStyle"></div></div>',
    computed: {
        lineStyle() {
            return `height: ${this.height}px; background: ${this.bgColor}`
        },
        hrStyle() {
            return `border-top: ${this.lineHeight}px ${this.styles} ${this.lineColor}`
        }
    },
    methods: {
        select() {
            VM.currentType = 'line',
            VM.currentId = this.id
        },
    }
})
// 图文集
Vue.component('glossary', {
    props: ['id','styles', 'titleSize', 'titleColor', 'bgColor', 'lists'],
    template: '<div @click="select" class="glossarys"> <div v-if="styles === 1" v-for="(item, index) in lists" :key="index" class="itemWrapper clear" :style="wrapperColor"><img :src="item.img" class="style1_img"/><div class="style1_content"><div v-text="item.title" :style="title" class="glossary_title"></div><div class="glossary_innerText" v-text="item.innerText"></div></div></div><div v-if="styles === 2" v-for="(item, index) in lists" :key="index" class="itemWrapper" :style="wrapperColor"><img :src="item.img" class="style2_img""/><div  v-text="item.title" :style="title" class="glossary_title"></div><div class="glossary_innerText" v-text="item.innerText"></div></div></div>',
    computed: {
        wrapperColor() {
            return `background: ${this.bgColor}`
        },
        title() {
            return `fontSize: ${this.titleSize}px; color:${this.titleColor}`
        }
    },
    methods: {
        select() {
            VM.currentType = 'glossary',
            VM.currentId = this.id
        },
    }
})
// 按钮
Vue.component('buttons', {
    props: ['id','parma'],
    template: '<div @click="select" class="buttons" :style="buttonStyle"><img v-if="parma.icon" :src="parma.url"/><span v-text="parma.text"></span></div>',
    computed: {
        buttonStyle() {
            return this.parma.border ? `border:1px solid ${this.parma.borderColor}; background:${this.parma.bgColor};color:${this.parma.fontColor}; border-radius:${this.parma.radius}px` : `background:${this.parma.bgColor};color:${this.parma.fontColor}; border-radius:${this.parma.radius}px`
        }
    },
    methods: {
        select() {
            VM.currentType = 'button',
            VM.currentId = this.id
        },
    }
})
// 图片列表
Vue.component('picture-list', {
    props: ['id','styles', 'column', 'radius', 'lists'],
    template: '<div @click="select"><div v-if="styles === 1" class="pictureList clear"><div class="fl picWrapper" v-for="(item, index) in lists" :key="index" :style="listStyle"><img :style="rad" :src="item.img" /><div v-text="item.title" class="title"></div></div></div><div v-if="styles === 2" class="pictureList clear"><div class="fl picWrapper"  v-for="(item, index) in lists" :key="index" :style="listStyle"><img :style="rad" :src="item.img" /><div v-text="item.title" class="titles"></div></div></div><div v-if="styles === 3" class="pictureList clear"><div class="fl picWrapper"  v-for="(item, index) in lists" :key="index" :style="listStyle"><img :style="rad" :src="item.img" /></div></div></div>',
    computed: {
        listStyle() {
            const column = this.column
            let width = 0
            if (column === 1) width = 100
            else if (column === 2) width = 50
            else if (column === 3) width = 33.3
            else width = 25
            return `width:${width}%;`
        },
        rad() {
            return `border-radius:${this.radius}%`
        }
    },
    methods: {
        select() {
            VM.currentType = 'pictureList',
            VM.currentId = this.id
        },
    }
})
// 悬浮图标
Vue.component('fixed', {
    props: ['id','bottom', 'left', 'opacity', 'bgColor', 'img'],
    template: '<div @click="select" class="fixed" :style="currentStyle"><img :src="img"/></div>',
    computed: {
        currentStyle() {
            return `bottom: ${this.bottom}%; left:${this.left}%; opacity:${this.opacity}; background:${this.bgColor}`
        }
    },
    methods: {
        select() {
            VM.currentType = 'fixed',
            VM.currentId = this.id
        },
    }
})
// 视频
Vue.component('videos', {
    props: ['id','poster', 'src', 'autoPlay'],
    template: '<div @click="select"><video :src="src" :poster="poster" :autoplay="autoPlay" width="100%" height="182px" controls="controls"></video></div>',
    methods: {
        select() {
            VM.currentType = 'video',
            VM.currentId = this.id
        },
    }
})
// 音频
Vue.component('audios', {
    props: ['id','poster', 'src', 'name', 'author'],
    template: '<div @click="select" class="audioWrapper clear"><div class="posterWrapper fl"><img :src="poster"/><img @click="togglePlat" src="../addons/kundian_farm/resource/home/images/play.png" class="play"/></div><div class="inner_content"><div class="clear audio_title"><div class="fl " v-text="name"></div><div class="fr" v-text="currentTime"></div></div><div v-text="author" class="author"></div></div><audio ref="audio" :src="src" @timeupdate="updateTime"></audio></div>',
    data() {
        return {
            isPlay: false,
            currentTime: '0:00'
        }
    },
    methods: {
        select() {
            VM.currentType = 'audio',
            VM.currentId = this.id
        },
        togglePlat() {
            let audio = this.$refs.audio
            if (this.isPlay) {
                audio.pause()
            }
            else {
                audio.play()
            }
            this.isPlay = !this.isPlay
        },
        updateTime(e) {
            let interval = e.target.currentTime
            let time = this.format(interval)
            this.currentTime = time
        },
        format(interval) {
            interval = interval | 0
            const minute = interval / 60 | 0
            const second = this._pad(interval % 60)
            return `${minute}:${second}`
        },
        _pad(num, n = 2) {
            let len = num.toString().length
            while (len < n) {
                num = '0' + num
                len++
            }
            return num
        },
    }
})